<template>
	<view class="welfare-packbox relative">
		<view v-for="(item, index) in resLists" :key="index" class="welfare-list relative flex-direction-column flex-justify-content-between"
			v-if="commonConfigs && commonConfigs.domainFrontFileLink" @click="gooDetailPage(item)"
			:style="{
				'background-size': '100% 100%',
				'background-image': item.status === 1 ? `url(${commonConfigs.domainFrontFileLink}/files/images/welfareHouse/rebate-item-bg.png)` : `url(${commonConfigs.domainFrontFileLink}/files/images/welfareHouse/rebate-item-end-bg.png)`,
			}">
			<!-- 福利屋: 0系统房 1玩家房 2奖励房 -->
			<!-- <image v-if="item.type === 2" class="welfare-type absolute" :src="commonConfigs.domainFrontFileLink + '/files/images/welfareHouse/rebate-item-tips-week.png'" mode=""></image> -->
			
			<view class="welfare-content flex relative font-hanserif-regular">
				<view class="house-left">
					<view class="house-left-box flex flex-direction-column" :class="item.status === 2? 'house-title-two' : '' ">
						<view class="relative flex flex-align-items-center" style="height: 44rpx;">
							<view class="truncate font-hanserif-bold house-name" style="margin-right: 6rpx;">{{ item.name }}</view>
							<image 
								style="width: 28rpx;height: 44rpx;margin: 0 4rpx 0 8rpx;"
								:src="commonConfigs.domainFrontFileLink + '/files/images/welfareHouse/icon-hot.png'" 
							/>
							<view class="truncate" style="font-size: 26rpx;color: #63FFF7;">{{ item.heat }}</view>
						</view>
						
						<view class="house-title truncate">{{ item.title }}</view>
						
					</view>
				</view>
				
				<!-- 福利: 1赏品 2优惠券 3机能 -->
				<scroll-view class="house-right scroll-x" scroll-x>
					<view class="flex-end">
						<view v-for="(imgItem, imgIndex) in item.reward_item_cover" :key="imgIndex" class="house-cover-border relative flex-all-center">
							<image v-if="[1, 3].includes(imgItem.type)" 
							class="bg" 
							:src="commonConfigs.domainFrontFileLink + '/files/images/welfareHouse/goods-bg.png'" 
							mode=""></image>
							<image mode="heightFix" :src="imgItem.path" class="house-cover-img" :class="imgItem.type === 3 ? 'house-cover-img-three' : ''" />
							
							<view class="house-award-num absolute" v-if="imgItem.type === 3">
								<image class="bg"
									:src="`${commonConfigs.domainFrontFileLink}/files/images/common/award-num-bg.png`" 
									mode="aspectFill" />
								<view class="relative">
									x{{ imgItem.num }}
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			
			<view class="house-price flex-align-items-center flex-end" :class="item.status === 2? 'house-price-two' : '' ">
				<view style="color: #FFFFFF;">总价值：</view>
				{{ item.recovery_price_balance }} 机能
			</view>
			
			<view class="house-footer-box flex-align-items-center relative">
				<view class="house-date-box flex-full flex-all-center"
					v-if="commonConfigs && commonConfigs.domainFrontFileLink" :class="item.status === 2 ? 'house-date-two' : ''" 
					:style="{'background-image':item.status === 2?`url(${commonConfigs.domainFrontFileLink}/files/images/welfareHouse/top-time-bg.png)`: 
					`url(${commonConfigs.domainFrontFileLink}/files/images/welfareHouse/top-time-bg.png)`}">
					
					{{ item.date_title }}
				</view>
				
				<view class="house-oper-btn">
					<image class="oper-btn-bg" v-if="commonConfigs && commonConfigs.domainFrontFileLink && [0, 1].indexOf(item.type) !== -1" :src="item.status === 1 ? `${commonConfigs.domainFrontFileLink}/files/images/welfareHouse/join-now-btn.png` : `${commonConfigs.domainFrontFileLink}/files/images/welfareHouse/join-end-btn.png`" />
					
					<image class="oper-btn-bg"  v-if="commonConfigs && commonConfigs.domainFrontFileLink && [2].indexOf(item.type) !== -1" :src="item.status === 1 ? '' : `${commonConfigs.domainFrontFileLink}/files/images/welfareHouse/join-end-btn.png`" />
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		name: 'comWelfareList',
		props: {
			resLists: Array
		},
		data() {
			return {};
		},
		computed:{
			commonConfigs() {
				return this.$store.getters.commonConfigs || {};
			}
		},
		methods:{
			gooDetailPage(item){
				this.$emit('gooDetailPage',item)
			}
		}
	}

</script>

<style lang="scss" scoped>
	.welfare-packbox {
		width: 100%;
		.welfare-list {
			width: 710rpx;
			height: 280rpx;
			padding: 40rpx 30rpx;
			margin: 0 auto;
			color: #184971;
			margin-bottom: 24rpx;
			.welfare-type {
				width: 109rpx;
				height: 47rpx;
				z-index: 10;
				left: 28rpx;
				top: 10rpx;
			}
			
			.welfare-content {
				// padding: 0 12rpx;
				width: 100%;
				
				.house-left {
					margin-top: 12rpx;
					width: 50%;
					.house-left-box {
						width: 100%;
						color: #FFFFFF;
						
					}
					.house-title-two{
						color: #FFFFFF;
					}
					.house-title {
						color: #FFFFFF;
						margin: 0 0 6rpx 0;
						width: 100%;
						font-size: 24rpx;
						margin-top: 10rpx;
					}
				}
				
				.house-right {
					&.scroll-x {
						width: 50%;
						overflow: hidden;
						.house-cover-border {
							margin-right: 10rpx;
							width: 104rpx;
							height: 104rpx;
							overflow: hidden;
							border-radius: 8rpx;
							.house-cover-img {
								width: 100%;
								height: 100%;
							}
							
							.house-cover-img-three {
								width: 64rpx;
								height: 50rpx;
							}
							
							.house-award-num {
								min-width: 56rpx;
								height: 20rpx;
								left: 0rpx;
								bottom: 0rpx;
								text-align: center;
								font-size: 18rpx;
								color: #fff;
								padding: 0rpx 8rpx;
							}
						}
					}
					
				}
			}
			
			.house-price{
				width: 100%;
				color: #63FFF7;
				margin: 12rpx 0;
				font-size: 24rpx;
			}
			.house-price-two{
				color: #63FFF7;
			}
			
			.house-footer-box {
				width: 100%;
				height: 54rpx;
				font-size: 22rpx;
				color: #FFFFFF;
				
				.house-date-box {
					white-space: nowrap;
					width: 516rpx;
					height: 52rpx;
					line-height: 40rpx;
					background-size: 100% 100%;
					text-indent: 16rpx;
					&.house-date-two {
						color: #FFFFFF;
						background-size: 100% 100%;
					}
				}
				
				.house-oper-btn {
					width: 168rpx;
					height: 100%;
					margin-left: 32rpx;
					.oper-btn-bg {
						width: 100%;
						height: 50rpx;
					}
				}
				
			}
			
		}
	}
</style>
